<template>
  <div class="user">
    <el-row class="margin-20">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>

    <el-row class="margin-20">
      <el-col :span="24">
        <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
        <el-input placeholder="请输入内容" class="search-input" v-model="obj.query" @change.enter="getUsers">
        </el-input>
        <el-button type="success" :icon="Search" plain @click="searchClick">Search</el-button>
        <el-button type="success" plain @click="dialogFormVisible = true">添加用户</el-button>
      </el-col>
    </el-row>

    <!-- 用户列表展示 -->
    <!-- data  表示定义的数据   prop  表示每一项传递的字段名   label 表示标题的名字  -->
    <el-table :data="userList" border stripe style="width: 100%">
      <el-table-column prop="username" label="姓名" width="180" />
      <el-table-column prop="mobile" label="电话" width="180" />
      <el-table-column prop="email" label="邮箱" width="180" />

      <!--  用户状态 -->

      <!-- scope.row 表示当前的每一项    -->
      <el-table-column label="用户状态" width="180">
        <template #default="scope">
          <!-- {{ scope.row }} -->

          <el-switch v-model="scope.row.mg_state" @change="changeStatus(scope.row)" inline-prompt active-text="启用" inactive-text="停用"
            style="
                                                                                                                                                                                                                                                                        --el-switch-on-color: #13ce66;
                                                                                                                                                                                                                                                                        --el-switch-off-color: #ff4949;
                                                                                                                                                                                                                                                                      " />
        </template>
      </el-table-column>

      <!--  用户操作 -->
      <el-table-column label="操作">
        <template #default="scope">
          <!--  编辑用户 -->
          <el-tooltip class="box-item" effect="dark" content="编辑用户" placement="top">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              <el-icon>
                <EditPen />
              </el-icon>
            </el-button>
          </el-tooltip>


          <!-- 删除用户 -->
          <el-tooltip class="box-item" effect="dark" content="删除用户" placement="top">
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              <el-icon>
                <Delete />
              </el-icon>
            </el-button>

          </el-tooltip>

          <!-- 分配权限 -->
          <el-tooltip class="box-item" effect="dark" content="分配权限" placement="top">
            <el-button size="mini" type="warning" plain @click="showGrantDialog(scope.row)">
              <el-icon><Select /></el-icon>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页 -->

    <el-pagination v-model:current-page="obj.pagenum" v-model:page-size="obj.pagesize" :page-sizes="[1, 2, 5, 10]" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

  <!--  弹框 -->

  <el-dialog v-model="dialogFormVisible" title="添加用户">
    <el-form :model="Forms" ref="formRef">
      <el-form-item label="用户名" prop="username" :rules="userRules" :label-width="formLabelWidth">
        <el-input v-model="Forms.username" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="用户密码" prop="password" :rules="passwordRules" :label-width="formLabelWidth">
        <el-input v-model="Forms.password" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
        <el-input v-model="Forms.email" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="手机号" prop="mobile" :label-width="formLabelWidth">
        <el-input v-model="Forms.mobile" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addUsersClick(formRef)">
            添加
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>


  <!--  编辑的弹框 -->

  <el-dialog v-model="editeDialog" title="编辑用户">
    <el-form :model="editeForms" ref="formRef">
      <el-form-item label="用户名" prop="username" :rules="userRules" :label-width="formLabelWidth">
        <el-input v-model="editeForms.username" type="text" autocomplete="off" disabled />
      </el-form-item>

      <!-- <el-form-item label="用户密码" prop="password" :rules="passwordRules" :label-width="formLabelWidth">
        <el-input v-model="editeForms.password" type="text" autocomplete="off" />
      </el-form-item> -->

      <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
        <el-input v-model="editeForms.email" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="手机号" prop="mobile" :label-width="formLabelWidth">
        <el-input v-model="editeForms.mobile" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item>
        <div class="dialog-footer">
          <el-button @click="editeDialog = false">取消</el-button>
          <el-button type="primary" @click="editSuccessClick(formRef)">
            修改确认
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>


  <!-- 分配角色  对话框 -->

  <el-dialog v-model="grantDialogFormVisible" title="分配角色">
    <el-form :model="grantForm">
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input v-model="grantForm.username" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="角色名称" :label-width="formLabelWidth">

        <el-select v-model="roleId" placeholder="请选择一个角色对应的id 传递给后台">


          <el-option :label="item.roleName" :value="item.roleId" v-for="item in roleList" />

        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="grantDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="grantUserSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

import { delUsersApi, changeUserStatusApi, addUsersApi, queryOnlyUserApi, editUserApi, getRolesApi, grantUserRoleApi } from '@/api/user'

import { ref, reactive, onMounted, watch } from 'vue'

import { Timer, Select, Delete, EditPen } from '@element-plus/icons-vue'

import { useUsers, usePagination, useSearch } from '@/views/user/user.js'

const { getUsers, userList, obj, total } = useUsers()



// 获取用户列表功能

// 分页功能
// const { handleSizeChange, handleCurrentChange } = usePagination()

//搜所功能
const { searchClick } = useSearch()



// 删除
// const handleDelete = (index, row) => {
//   console.log(index, row.id)
//   //1  删除给出提示
//   // 2 取消什么都不做
//   // 3 确认删除 发送请求
//   // 4  清除失败给出提示
//   // 5  清除成功  给出删除成功的提示    重新刷新页面
//   ElMessageBox.confirm(
//     '真的要删除吗?',

//     {
//       confirmButtonText: '确认',
//       cancelButtonText: '取消',
//       type: 'warning',
//     }
//   )
//     .then(() => {
//       delUsersApi({ id: row.id }).then((res) => {
//         console.log(res.data)
//         if (res.meta.status != 200) return alert('删除失败')
//         getUsers()
//       })
//     })
//     .catch(() => {
//       ElMessage({
//         type: 'info',
//         message: '取消退出',
//       })
//     })
// }

//1  删除给出提示
// 2 取消什么都不做
// 3 确认删除 发送请求
// 4  清除失败给出提示
// 5  清除成功  给出删除成功的提示    重新刷新页面
const handleDelete = async (index, row) => {
  console.log(index, row.id)

  let isFlag = await ElMessageBox.confirm('真的要删除吗?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).catch(() => { })
  if (!isFlag) return alert('取消')
  let res = await delUsersApi({ id: row.id })

  if (res.meta.status != 200) return alert('删除失败')
  getUsers()
}

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  obj.pagesize = val
  getUsers()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  obj.pagenum = val
  getUsers()
}

// 更改状态
// 1 获取当前用户的id  和当前的状态
// 2 发送请求
// 3  成功后  重新更新数据    getUsers()

const changeStatus = (row) => {
  console.log(row)
  const { mg_state, id } = row

  console.log(mg_state, id)

  changeUserStatusApi({ uId: id, type: mg_state }).then((res) => {
    const {
      data,
      meta: { msg, status },
    } = res.data

    if (status !== 200) return alert('失败')

    getUsers()
  })
}

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
// 定义表单数据对象
const Forms = reactive({
  username: 'admin',
  password: '123456',
  email: '123@qq.com',
  mobile: '123456',
})

//  用户名验证
const userRules = ref([
  { required: true, message: '用户名不能为空' },
  { min: 3, max: 15, message: 'Length should be 3 to 15', trigger: 'blur' },
])

// 密码验证
const passwordRules = ref([
  { required: true, message: '密码不能为空' },
  { min: 3, max: 15, message: 'Length should be 3 to 15', trigger: 'blur' },
])

//  添加用户逻辑
// 1 判断  成功了 才能往下执行代码

// 2 收集输入的数据
// 3 发送请求
// 4  成功或者失败  关闭弹框
// 5  成功 重新刷新页面

const formRef = ref(null) // 获取当前的表单dom 元素
const addUsersClick = (formEl) => {
  if (!formEl) return alert('验证失败')
  formEl.validate(async (valid) => {
    // valid  为真则表示验证通过
    if (valid) {
      // 1 验证通过后 发送请求
      // 2 传递用户名和密码

      let {
        data,
        meta: { msg, status },
      } = await addUsersApi(Forms)

      //  3  如果失败了  给出提示  不进行跳转
      if (status !== 201) return ElMessage.error(msg)

      // 4.2  给出成功的提示
      ElMessage.success(msg)

      getUsers()
    } else {
      console.log('error submit!')
      return false
    }

    // 关闭弹框
    dialogFormVisible.value = false
  })
}






// 编辑
// 1 获取到用户的id
// 2  根据当前的id  进行查询    找到对应的用户
// 3  打开 编辑的弹框   把 数据填充到表单里面
// 4   重新修改数据 (验证一下数据)
// 5   成功后 关闭弹框   重新刷新页面
const editeForms = reactive({
  id: '',
  username: '',
  password: '',
  email: '',
  mobile: '',
})

const editeDialog = ref(false)
const handleEdit = async (index, row) => {

  // 1 获取到用户的id  row.id
  console.log(index, row.id)

  // 2  根据当前的id  进行查询    找到对应的用户

  let res = await queryOnlyUserApi({ id: row.id })
  console.log('查询', res.data)

  // 3 打开 编辑的弹框 
  editeDialog.value = true

  // editeForms.id=res.data.id
  // editeForms.id = res.data.id
  // editeForms.id = res.data.id
  // editeForms.id = res.data.id
  for (let key in editeForms) {
    editeForms[key] = res.data[key]
  }
  console.log(editeForms)








}

const editSuccessClick = async () => {

  // 1 准备发送修改数据  的请求
  // 2 成功关闭 弹框
  // 3 重新刷新页面
  let res = await editUserApi(editeForms)

  console.log(res.data)


  if (res.meta.status == 200) {
    editeDialog.value = false

    ElMessage.success('更改成功')

    getUsers()

  }



}



// 实现点击分配角色
// 1  确定当前点击的用户 (id)
// 2  获取到之前的当前的用户名称
// 3  获取到用户能够分配的角色列表
// 4  进行角色分配  js 逻辑
// 5  分配成功后 关闭弹框
// 6  重新加载数据 页面重新渲染

const grantDialogFormVisible = ref(false) // 控制分配用户角色对话框显示隐藏
const grantForm = reactive({ username: '' })  // 存储分配角色时获取的用户信息
const roleList = ref([])  // 角色列表
const roleId = ref('') // 角色ID 
const userId = ref('') // 用户id 
const showGrantDialog = async (row) => {
  console.log(row)
  grantDialogFormVisible.value = true





  // 1  确定当前点击的用户 (id)
  userId.value = row.id
  let res = await queryOnlyUserApi({ id: row.id })
  // console.log('查询', res.data.rid)
  roleId.value = res.data.rid


  // 2 获取到当前的用户名称
  grantForm.username = row.username



  //  3  获取角色列表 
  let resRoles = await getRolesApi()
  // console.log(resRoles)

  // 3.1  对用户列表进行一个数据整理
  roleList.value = resRoles.data.map(item => ({ roleName: item.roleName, roleId: item.id }))

  // 4  选择   进行角色分配  js 逻辑   赋值  给下拉框进行角色
  console.log(roleList.value)

}

//  5 点击确认的时候进行角色分配

const grantUserSubmit = async () => {

  // if (!roleId.value) {
  //   return alert('角色id 不能为空')
  // } // 没有的情况不执行

  // console.log(roleId.value)


  // 5.1 发起分配角色的请求
  let res = await grantUserRoleApi({ id: userId.value, rid: roleId.value })

  if (res.meta.status !== 200) return alert('分配失败 参数传递错误')

  // 5.2 关闭弹框
  grantDialogFormVisible.value = false

  // 6  重新渲染数据
  getUsers()

}

</script>

<style lang="scss" scoped>
/*组件内部style标签中书写以下样式*/

/*element.scss中书写面包屑组件样式*/
.el-breadcrumb {
  background-color: #d3dce6;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px !important;
  margin-bottom: 15px;
}

.user {
  .margin-20 {
    margin: 20px 0;
  }

  .search-input {
    width: 300px;
    margin-right: 20px;
  }

  .table {
    margin-top: 20px;
  }

  .page {
    padding: 5px 0;
    background-color: #d3dce6;
  }
}

.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer {
  position: absolute;
  right: 40px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
